<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel="icon" href="favicon.ico"><title>分子视界</title><style>* {
        font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
          Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji",
          "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji", sans-serif;
      }
      body {
          overflow: hidden;
          position: relative;
      }
      #body-loading {
        padding: 0;
        margin: 0;
        overflow: hidden;
        position: absolute;
        z-index: 99;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
  
      .loading {
        width: 80px;
        height: 80px;
        display: grid;
        /* 制作3列的网格容器 */
        grid-template-columns: repeat(3, 1fr);
        /* 设置行与列之间的间隙 */
        grid-gap: 10px;
        /* 对子部分进行编号 */
        /* counter-reset: number; */
        transform: rotate(45deg);
      }
  
      .loading span {
        /* 自定义属性 */
        --c: gray;
        /* 调用var函数使用自定义属性--c */
        background-color: var(--c);
        position: relative;
        transform: scale(0);
        /* 执行动画：动画 时长 线性的 无线次播放 */
        animation: blinking 2s linear infinite;
        /* 动画延迟 */
        animation-delay: var(--d);
      }
  
      .loading span::before {
        /* 设置增量 */
        /* counter-increment: number; */
        /* 将编号赋值到content，这里有助于我们根据编号设置样式 */
        /* content: counter(number); */
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        transform: rotate(-45deg);
      }
  
      .loading span:nth-child(7) {
        --c: #F15A5A;
        --d: 0s;
      }
  
      .loading span:nth-child(4),
      .loading span:nth-child(8) {
        --c: #F0C419;
        --d: 0.2s;
      }
  
      .loading span:nth-child(1),
      .loading span:nth-child(5),
      .loading span:nth-child(9) {
        --c: #4EBA6F;
        --d: 0.4s;
      }
  
      .loading span:nth-child(2),
      .loading span:nth-child(6) {
        --c: #2D95BF;
        --d: 0.6s;
      }
  
      .loading span:nth-child(3) {
        --c: #955BA5;
        --d: 0.8s;
      }
  
      /* 定义动画 缩放 */
      @keyframes blinking {
  
        0%,
        100% {
          transform: scale(0);
        }
  
        40%,
        80% {
          transform: scale(1);
        }
      }
      .footer{
        position: absolute;
        bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 999;
        color: rgb(6 19 40 / 80%);;
        font-size: 13px;
        line-height: 14px;
      }
      .animate__fadeOut {
          -webkit-animation-name: fadeOut;
          animation-name: fadeOut
      }
      .animate__fadeIn {
          -webkit-animation-name: fadeIn;
          animation-name: fadeIn
      }
      .animate__animated {
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
      }
      .animate__animated05 {
          -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
      }
      @keyframes fadeOut {
          0% {
              opacity: 1
          }
          30%{
            opacity: 0.4
          }
          to {
              opacity: 0
          }
      }
      @keyframes fadeIn {
          0% {
              opacity: 0
          }
          to {
              opacity: 1
          }
      }</style><script defer="defer" src="js/chunk-vendors.80d7ff00.js"></script><script defer="defer" src="js/index.637f2954.js"></script></head><body style="background: linear-gradient(200deg, #f4efef, #e3eeff)"><div id="body-loading"><div class="loading"><span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span></div></div><div id="app"></div><div class="footer">@分子视界<span style="padding: 0 2px;">&#10084</span></div></body></html>